<template>
  <div>
    <i
      class="iconfont"
      :class="
        count === halfCount
          ? 'icon-xingxing'
          : halfCount === i + 1
          ? 'icon-star-half'
          : 'icon-xingxing'
      "
      v-for="(v, i) in totalCount"
      :key="i"
      :style="setStyle(i)"
      @click="handleClick(i)"
    ></i>
  </div>
</template>


<script>
import "../assets/fonts/iconfont.css";
export default {
  name: "Rate",
  props: {
    totalCount: {
      type: Number,
      default: 5
    },
    activeCount: {
      type: Number,
      default: 3
    },
    color: {
      type: String,
      default: "red"
    }
  },
  data() {
    return {
      count: Math.floor(this.activeCount),
      halfCount: Math.ceil(this.activeCount)
    };
  },
  methods: {
    handleClick(i) {
      this.count = i + 1;
      this.halfCount = i + 1;
      this.$emit("onChange", this.count);
    },
    setStyle(i) {
      if (this.count === this.halfCount) {
        return {
          color: i < this.count ? this.color : "#ccc"
        };
      } else {
        return {
          color: i <= this.count ? this.color : "#ccc"
        };
      }
    }
  }
};
</script>

